<template>
  <div class="policy_list_page">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="策略名称" prop="strategyName">
        <el-input
          v-model="queryParams.strategyName"
          placeholder="请输入策略名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客群" prop="customerGroup">
        <el-select
          v-model="queryParams.customerGroup"
          placeholder="请选择客群"
          class="select_box"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in customerGroupList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道" prop="strategyChannelCode">
        <el-select
          v-model="queryParams.strategyChannelCode"
          placeholder="请选择渠道"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in channelList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构" prop="strategyOrganId">
        <el-cascader
          style="width: 100%"
          clearable
          collapse-tags
          :options="organizationList"
          :props="organizationList_props"
          v-model="queryParams.strategyOrganId"
          :show-all-levels="false"
          placeholder="请选择组织机构"
        ></el-cascader>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="openDetail('add')"
          >新建</el-button
        >
      </el-col>
    </el-row> -->

    <el-table v-loading="loading" :data="policyListShow">
      <el-table-column
        label="实列Id"
        align="center"
        prop="strategyInstanceId"
      />
      <el-table-column label="策略名称" align="center" prop="strategyName" />
      <el-table-column label="客群" align="center" prop="customerGroupName" />
      <el-table-column label="渠道" align="center" prop="strategyChannelName" />
      <el-table-column label="机构" align="center" prop="strategyOrganName" />
      <el-table-column
        label="描述"
        align="center"
        prop="strategyDescribe"
        width="300"
      />
      <!-- <el-table-column label="创建人" align="center" prop="creator" /> -->
      <el-table-column
        label="状态"
        sortable
        align="center"
        prop="strategyInstanceStatusName"
        width="100"
        :filters="[
          { text: '已完成', value: 'ywc' },
          { text: '执行中', value: 'zxz' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">
          <div
            style="display: flex; align-items: center"
            v-if="scope.row.strategyInstanceStatus == 'ywc'"
          >
            <div
              style="
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background-color: rgb(17, 169, 131);
              "
            ></div>
            <span style="margin-left: 8px">已完成</span>
          </div>
          <div
            style="display: flex; align-items: center"
            v-if="scope.row.strategyInstanceStatus == 'zxz'"
          >
            <div
              style="
                width: 8px;
                height: 8px;
                border-radius: 8px;
                background-color: rgb(8, 9, 8);
              "
            ></div>
            <span style="margin-left: 8px">执行中</span>
          </div>

          <!-- <el-switch
            v-model="scope.row.status"
            active-value="0"
            inactive-value="1"
            @change="handleStatusChange(scope.row)"
          ></el-switch> -->
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="insertTimeStr"
        width="180"
        sortable
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="openDetail('detail', scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            v-show="
              scope.row.strategyExecuteType != 'hand' &&
              scope.row.strategyInstanceStatus != 'ywc'
            "
            @click="stopStrategy(scope.row)"
            >结束</el-button
          >
          <!-- <el-button
            v-if="scope.row.strategyInstanceStatus === 'ywc'"
            size="mini"
            type="text"
            icon="el-icon-video-pause"
            @click="handleItem(scope.row)"
            >执行</el-button
          > -->
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="openDetail('edit', scope.row)"
            >修改</el-button
          > -->
          <!-- <el-button
            size="mini"
            type="text"
            icon="el-icon-video-play"
            v-if="scope.row.status === '1' || scope.row.status === '3'"
            @click="pauseItem(scope.row)"
            >暂停</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getList"
    />
    <!-- <el-dialog v-loading="dialogLoading" title="策略统计详情" :visible.sync="open" width="680px" append-to-body> -->
    <!-- <div style="padding: 24px 0px 24px 0px;width: 500px;background-color: rgb(243,243,243);display: flex;align-items: center;">
        <div style="width: 25%;border-right:1px solid #DCDFE6;line-height: 24px;padding-left: 24px;">
          <div>目标完成率</div>
          <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.targetCompletionRate }}%</div>
        </div>
        <div style="width: 25%;border-right:1px solid #DCDFE6;line-height: 24px;padding-left: 24px;">
          <div>累计进入</div>
          <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.accumulatedEntry }}%</div>
        </div>
        <div style="width: 25%;border-right:1px solid #DCDFE6;line-height: 24px;padding-left: 24px;">
          <div>累计触发</div>
          <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.cumulativeTriggering }}%</div>
        </div>
        <div style="width: 25%;line-height: 24px;padding-left: 24px;">
          <div>目标完成</div>
          <div style="font-weight: 700;font-size: 16px;">{{ detailTopData.goalCompletion }}%</div>
        </div>
      </div>
      <div style="margin-top: 24px;font-weight: 700;font-size: 16px;">
        策略执行趋势
        <div :key="myCharts" v-if="tableData.length != 0" id="main" style="width: 600px;height:300px;"></div>
        <div  v-else style="line-height: 60px;width: 100%;text-align: center;color: #909399;font-size: 14px;font-weight: 500;">
          暂无数据
        </div>
      </div>
      <div class="tableDatacolumn">
        <el-table
          :data="tableData"
          style="width: 100%" :max-height="240">
          <el-table-column prop="nodeName" align="left" label="节点名称" width="120"></el-table-column>
          <el-table-column prop="buryingPointName" align="left" label="埋点名称" width="120"></el-table-column>
          <el-table-column prop="targetCompletionRate" align="center" label="完成率">
            <template slot-scope="scope">
              <span>{{ scope.row.targetCompletionRate || 0}}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="completeCount" align="center" label="完成(人次)">
            <template slot-scope="scope">
              <span>{{ scope.row.completeCount || 0}}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="totalCount" align="center" label="总人次">
            <template slot-scope="scope">
              <span>{{ scope.row.totalCount || 0}}%</span>
            </template>
          </el-table-column>
        </el-table>
      </div> -->
    <!-- <div slot="footer" class="dialog-footer">
        <el-button type="primary">确 定</el-button>
        <el-button >取 消</el-button>
      </div> -->
    <!-- </el-dialog> -->
  </div>
</template>
<script>
// import { listPost, getPost, delPost, addPost, updatePost } from "@/api/policyConfiguration/index";
import axios from "axios";
let _self;
export default {
  name: "statisticsQuery",
  data() {
    return {
      completionData: [],
      customerGroupList: [],
      channelList: [],
      organizationList: [],
      organizationList_props: {
        multiple: true,
        label: "organName",
        value: "organCode",
        children: "childOrganList",
        checkStrictly: true,
      },
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 是否显示弹出层
      open: false,
      // 表格数据
      policyListShow: [],
      dataList: [],
      // 查询参数
      queryParams: {},
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      myCharts: Math.random(),
      echartsData: [],
      detailTopData: {
        targetCompletionRate: 0, // 目标，
        accumulatedEntry: 0, // 进
        cumulativeTriggering: 0, //触发
        goalCompletion: 0, // 完成
      },
    };
  },
  mounted() {
    _self = this;
  },
  created() {
    this.getListEnumList();
    this.getList();
  },
  methods: {
    filterTag(value, row) {
      return row.strategyInstanceStatus === value;
    },
    async getListEnumList() {
      try {
        const response = await axios.post(
          process.env.VUE_APP_BASE_API + "/strategy/queryEnumList",
          {}
        );
        if (response.data.enumList) {
          if (response.data.enumList.customerGroup) {
            this.customerGroupList = response.data.enumList.customerGroup;
          }
          if (response.data.enumList.channelType) {
            this.channelList = response.data.enumList.channelType;
          }
          if (response.data.enumList.organList) {
            this.organizationList = JSON.parse(
              response.data.enumList.organList
            );
          }
        }
      } catch (error) {
        console.error("Error fetching users:", error);
      }
    },
    async getList() {
      this.loading = true;
      try {
        const response = await axios.post(
          process.env.VUE_APP_BASE_API +
            "/strategy/queryStrategyInstanceList?pageNum=" +
            this.pageNum +
            "&pageSize=" +
            this.pageSize,
          {}
        );
        this.policyListShow = response.data.rows;
        this.dataList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
        console.error("Error fetching users:", error);
      }
    },
    resetQuery() {
      this.queryParams = {
        name: undefined,
      };
      this.policyListShow = this.dataList;
      this.resetForm("form");
    },
    handleQuery() {
      this.pageNum = 1;
      this.getList();
    },
    // 执行
    handleItem(row) {
      // let text = row.status === "0" ? "启用" : "停用";
      // this.$modal
      //   .confirm('确认要"' + text + '""' + row.name + '"策略吗？')
      //   .then(() => {
      //     row.status = row.status === "0" ? "1" : "0";
      //     let currentIndex = this.dataList.findIndex((item) => {
      //       return item.id == row.id;
      //     });
      //     if (currentIndex == 0 || (currentIndex && currentIndex != -1)) {
      //       this.dataList.splice(currentIndex, 1, row);
      //     }
      //     this.policyListShow = this.dataList;
      //     this.$modal.msgSuccess(text + "成功");
      //   })
      //   .catch(function () {
      //     row.status = row.status === "0" ? "1" : "0";
      //   });
    },
    openDetail(type, data) {
      if (type == "detail") {
        // this.detailTopData = this.$options.data().detailTopData
        // this.tableData = this.$options.data().tableData
        // this.open = true
        // this.getecharts(data)
        this.$router.push({
          path: "/SOPBusiness/strategyStatisticsD",
          query: {
            strategyInstanceId: data.strategyInstanceId,
          },
        });
      }
    },
    // 结束
    stopStrategy(row) {
      this.$modal
        .confirm('确认要结束"' + row.strategyName + '"吗？')
        .then(async () => {
          try {
            const response = await axios.post(
              process.env.VUE_APP_BASE_API +
                "/strategy/deleteStrategyInstanceById",
              { strategyInstanceId: row.strategyInstanceId || "" }
            );
            this.$modal.msgSuccess("操作成功");
            this.getList();
          } catch (error) {
            this.loading = false;
            console.error("Error fetching users:", error);
          }
        })
        .catch(function () {
          row.status = row.status === "0" ? "1" : "0";
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.policy_list_page {
  padding: 32px;
  .head_title {
    font-size: 32px;
    font-weight: 600;
  }
  .search_head {
    width: 100%;
    background: #fff;
    height: 100px;
    margin-bottom: 32px;
    padding-left: 40px;
    .search_form {
      width: 100%;
      display: inline-flex;
    }
  }
}
</style>
